import React, { memo, ReactNode, useEffect } from 'react'
import { useAppDispatch } from '@/store'
import { useAppSelector, shallowEqualApp } from '@/store'
import { fetchTopListAction } from '../../store/recommend'
import { TopListWrapper } from './style'
import SectionHeaderV1 from '@/components/section-header-v1'
import TopListItem from './components/top-list-item'

interface IProps {
  children?: ReactNode
}

const TopList: React.FC<IProps> = () => {
  const { rankings } = useAppSelector(
    (state) => ({
      rankings: state.recommend.rankings
    }),
    shallowEqualApp
  )
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchTopListAction())
  }, [])
  return (
    <TopListWrapper>
      <SectionHeaderV1
        title="榜单"
        morePath="/discover/ranking"
      ></SectionHeaderV1>
      <div className="content">
        {rankings.map((item, index) => {
          return (
            <div className="content-item" key={index}>
              <TopListItem itemData={item}></TopListItem>
            </div>
          )
        })}
      </div>
    </TopListWrapper>
  )
}

export default memo(TopList)
